<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        div{
            background-color: darkcyan;
        }
        span{
            background-color: brown;
        }
        #div2{
            background-color: aqua;
        }
        #span1{
            background-color: crimson;
        }
        .red{
            background-color: red;
        }
        *{
            height: 50px;
            /*color: yellow;*/
        }
        .red span{
            color: white;
        }
        #span1,.blue,h3{
            font-size: 48px;
        }

        #my>#son{
            color: red;
        }
    </style>
</head>
<body>

<!--
选择器就是css的重点，通过选择器去获取不同的元素进行设置。
方式：
1.元素选择器
    通过元素名称获取元素对象,会设置所有的该元素
    语法：tag{}
2.id选择器
    设置元素的id，在元素内部通过id属性指定元素的id值，通常id值在当前页面是唯一的
    语法：#id值{}
3.class选择器
    设置class属性一样的所有的元素，多个元素的class可以一样，从而统一设置
    语法：.class值{}
4.通用选择器
    设置所有的元素。
    语法：*{}
5.并集选择器
    前面个选择器找到的元素要包含后面个选择器找到的元素
    语法：tag tag{}，或者#id tag{},或者.class #id{}
6.交集选择器
    只要属于其中一个选择器就可以了
    语法：tag,tag{}或者#id,#class{}
7.子选择器
    就是设置父元素的一级子元素。
    语法：#id>.class{}
-->

<div>第一个div</div>
<div id="div2">第二个div</div>
<span id="span1">第一个span</span>
<span>第二个sapn</span>
<p class="red">你是风儿我是沙</p>
<p class="red">缠缠<span>绵绵</span>到天涯</p>
<p class="blue">你是风儿我是沙，缠缠绵绵到天涯</p>
<h3>标题3</h3>

<div id="my">我
    <div id="son">儿子
    </div>
    <div>
        <div id="sunzi">孙子</div>
        <div id="son">私生子</div>
    </div>
</div>

</body>
</html>